<template>
  <div>
    <a-card>
      <h2>商品分类</h2>
      <a-divider />
      <space-between>
        <a-input
          style="width:300px"
          placeholder="请输入要添加分类的名称"
          v-model:value="currentClassify"
        />
        <a-button @click="addClassify" type="primary">添加</a-button>
      </space-between>
      <div class="mt-10">
        <a-table
          :dataSource="list"
          :columns="columns"
          :pagination="false"
          bordered
        >
          <template #operation="{record}">
            <a-button @click="updateClassifyHandle(record)" type="primary"
              >编辑</a-button
            >
            <a-button
              @click="deleteClassify(record._id)"
              type="danger"
              style="margin-left:15px"
              >删除</a-button
            >
          </template>
        </a-table>
      </div>
      <div class="mt-10">
        <a-pagination
          v-model:current="curPage"
          :page-size="pageSize"
          :total="total"
          @change="setPage"
        />
      </div>
    </a-card>
    <a-modal
      v-model:visible="modifyModalVisible"
      title="修改分类名称"
      @ok="handleOk"
    >
      <a-input
        style="width:300px"
        placeholder="请输入要添加分类的名称"
        v-model:value="curEditClassify.newTitle"
      />
    </a-modal>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { handleResult } from '../helpers/utils'
import { goodClassifyService } from '../services'
export default defineComponent({
  setup () {
    const curPage = ref(1)
    const total = ref(0)
    const pageSize = ref(5)
    const list = ref([])
    const columns = [
      {
        title: '分类名称',
        dataIndex: 'title'
      },
      {
        title: '操作',
        slots: {
          customRender: 'operation'
        }
      }
    ]

    const setPage = page => {
      curPage.value = page
      getlist()
    }

    const getlist = async () => {
      const res = await goodClassifyService.getlist(
        curPage.value,
        pageSize.value
      )
      handleResult(res).success(({ data: { list: l, total: t } }) => {
        l.forEach(item => {
          item.key = item._id
        })
        list.value = l
        total.value = t
      })
    }

    const currentClassify = ref('')
    const addClassify = async () => {
      const res = await goodClassifyService.addClassify(currentClassify.value)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
        getlist()
      })
    }

    const deleteClassify = async classifyId => {
      const res = await goodClassifyService.deleteClassify(classifyId)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
        getlist()
      })
    }

    const modifyModalVisible = ref(false)
    const curEditClassify = reactive({
      classify: {},
      newTitle: ''
    })
    const updateClassifyHandle = classify => {
      modifyModalVisible.value = true
      curEditClassify.classify = classify
      curEditClassify.newTitle = classify.title
    }
    const handleOk = async () => {
      const res = await goodClassifyService.updateTitle(
        curEditClassify.classify._id,
        curEditClassify.newTitle
      )
      handleResult(res).success(({ msg }) => {
        message.success(msg)
        modifyModalVisible.value = false
        curEditClassify.classify.title = curEditClassify.newTitle
      })
    }

    onMounted(() => {
      getlist()
    })

    return {
      curPage,
      total,
      pageSize,
      list,
      columns,
      setPage,
      addClassify,
      currentClassify,
      deleteClassify,
      updateClassifyHandle,
      handleOk,
      curEditClassify,
      modifyModalVisible
    }
  }
})
</script>

<style lang="scss" scoped></style>
